<template>
    <div>

        <div id="otherFleet" >
            <i-button type="primary" style="margin-bottom:5px;" @click="onClickBindReciver">绑定收货人</i-button>
            <tablePage ref="containerTab" :api="fleetReceiverList" :param="tabParam">
                <template slot-scope="props">
                    <Table :columns="columnsReceiver" :data="props.data"></Table>
                </template>
            </tablePage>
            <Modal
                    v-model="modelAddReceiver"
                    title="收货人管理"
                    :loading="modelAddReceiverLoading"
                    @on-ok="onOkAddConfirm">
                <span>收货人：&nbsp;&nbsp;&nbsp;</span>
                <Input ref="name" v-model="addData.name" placeholder="输入收货人" style="width: 200px"></Input>
                <div style="width:100%;height:20px;"></div>
                <span>电&nbsp;&nbsp;&nbsp;话：&nbsp;&nbsp;&nbsp;</span>
                <Input ref="mobile" v-model="addData.mobile" placeholder="输入电话" style="width: 200px"></Input>
                <div style="width:100%;height:20px;"></div>
                <span>地&nbsp;&nbsp;&nbsp;址：&nbsp;&nbsp;&nbsp;</span>
                <Input ref="address" v-model="addData.address" placeholder="输入地址" style="width: 200px"></Input>
                <div style="width:100%;height:20px;"></div>
                <span>车辆类型：</span>
                <Select v-model="addData.type" multiple style="width:200px" @on-change="e =>{selectOnChenge(e)}">
                    <Option v-for="item in cityList" :value="item.id" :key='item.name'>{{item.name}}</Option>
                </Select>

                <Checkbox style="margin-left: 10px" v-model="switchAll" @on-change="changeSwitchAll">全选</Checkbox>

                <div style="width:100%;height:20px;"></div>
                <span>选择：&nbsp;&nbsp;&nbsp;</span>
                <template>
                    <Transfer
                            :data="transferDriver"
                            :target-keys="addData.targetKeys"
                            filterable
                            :render-format="transferRander"
                            @on-change="transferDriverOnChange"></Transfer>
                </template>
            </Modal>
        </div>
    </div>
</template>
<script>
  import {
    getOwnDriverListByTrunkType,
    fleetReceiverSave,
    fleetReceiverList,
    fleetReceiverDel,
    getTruckTypeList

  } from '@api/backEnd/fleetControl'
  import tablePage from '@components/table/tablePage.vue'
  import _ from 'lodash'

  export default {
    name: 'receiverList',
    data () {
      let sourceDriver = [] // 源司机数据
      let transferDriver = []// 司机列表处理后
      let modelAddReceiver = false // 添加模态窗口
      let modelAddReceiverLoading = true
      let cityList = [] // 车型列表
      let switchAll = false//  选择所有
      let addData = {// 添加数据
        name: '',
        mobile: '',
        address: '',
        type: '',
        targetKeys: []// 穿梭框结果
      }
      let columnsReceiver = [
        {
          title: '收货人',
          key: 'name'
        },
        {
          title: '电话',
          key: 'mobile'
        },
        {
          title: '地址',
          key: 'address'
        },
        {
          title: '车型',
          key: 'truckTypeSet'
        },
        {
          title: '司机',
          key: 'driverSet'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: (value, row) => {
                    this.modelAddReceiver = true
                    let id = params.row.id
                    let name = params.row.name
                    let truckTypeSetIds = params.row.truckTypeSetIds
                    let relateIds = params.row.relateIds
                    this.onClickEditReciver(id, name, truckTypeSetIds, relateIds)
                  }
                }
              }, '管理车型/司机'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      content: '确定解除绑定？',
                      onOk: () => {
                        console.log(params)
                        let id = params.row.id
                        console.log(id)
                        this.deleteById(id)
                      }
                    })
                  }
                }
              }, '删除收货人')
            ])
          }
        }
      ]

      let tabParam = {}

      let datas = {
        sourceDriver,
        transferDriver,
        modelAddReceiver,
        modelAddReceiverLoading,
        fleetReceiverList, // 接口
        columnsReceiver,
        addData,
        cityList,
        tabParam,
        switchAll
      }
      return datas
    },
    computed: {},
    methods: {
      // 车型多选 onchange
      selectOnChenge: function (e) {
        let relateIds = JSON.stringify(e)
        console.log(this.addData.type)
        getOwnDriverListByTrunkType(relateIds).then(res => {
          if (res.data.isSuccess === 1) {
            this.sourceDriver = res.data.data
            this.transferDriver = []
            let that = this
            _.forEach(this.sourceDriver, function (item, index) {
              let tempobj = {
                key: item.id,
                label: item.loginName,
                disabled: false
              }
              that.transferDriver.push(tempobj)
            })
          }
        })
        if (this.cityList.length !== this.addData.type.length) {
          this.switchAll = false
        }
      },
      // 穿梭框onchange
      transferDriverOnChange (newTargetKeys) {
        this.addData.targetKeys = newTargetKeys
        console.log(this.addData.targetKeys)
      },
      // 穿梭框渲染
      transferRander (item) {
        return item.label
      },
      onClickBindReciver () {
        this.transferDriver = []
        this.addData = {
          name: '',
          type: '',
          targetKeys: []}
        this.modelAddReceiver = true
      },
      onClickEditReciver (id, name, truckTypeSetIds, relateIds) {
        this.addData.id = id
        this.addData.name = name
        let ids = truckTypeSetIds.split(',')
        for (let i = 0; i < ids.length; i++) {
          ids[i] = parseInt(ids[i])
        }
        let ids2 = relateIds.split(',')
        this.addData.type = ids // 设置车型选中
        this.addData.targetKeys = ids2 // 设置选中司机

        console.log(this.addData.targetKeys)
        this.modelAddReceiver = true
      },
      onOkAddConfirm () {
        // 验证数据
        if (this.$refs['name'].value.length < 1) {
          this.$Message.warning('请填写收货人！')
          this.modelAddReceiverLoading = false
          this.$nextTick(() => {
            this.modelAddReceiverLoading = true
          })
          return
        }
        if (this.addData.type.length < 1) {
          this.$Message.warning('请选择车辆类型！')
          this.modelAddReceiverLoading = false
          this.$nextTick(() => {
            this.modelAddReceiverLoading = true
          })
          return
        }
        if (this.addData.targetKeys.length < 1) {
          this.$Message.warning('请选择司机！')
          this.modelAddReceiverLoading = false
          this.$nextTick(() => {
            this.modelAddReceiverLoading = true
          })
          return
        }
        let xlReceiver = {// 封装传输类
          id: this.addData.id,
          name: this.addData.name,
          mobile: this.addData.mobile,
          address: this.addData.address,
          relateIds: this.addData.targetKeys.toString()
        }
        fleetReceiverSave(xlReceiver).then(res => {
          if (res.data.isSuccess === 1) {
            this.$refs['containerTab'].dataRefresh()
            if (xlReceiver.id) {
              this.$Message.info('保存成功')
            } else {
              this.$Message.info('添加成功')
            }
          } else {
            this.$Message.info(res.data.res)
          }
        })
        this.modelAddReceiver = false
      },
      deleteById (val) {
        fleetReceiverDel({
          id: val
        }).then(res => {
          if (+res.data.isSuccess === 1) {
            this.$refs['containerTab'].dataRefresh()
            this.$Message.success('删除成功')
          } else {
            this.$Message.error(res.data.res)
          }
        })
      },
      getTruckType () {
        getTruckTypeList().then(res => {
          this.cityList = res.data.data
          console.log(this.cityList)
        })
      },
      changeSwitchAll () {
        if (this.switchAll) {
          console.log(this.addData.type)
          this.addData.type = []
          for (let i = 0; i <= this.cityList.length; i++) {
            this.addData.type.push(i)
          }
        }
      }
    },
    mounted () {
      this.getTruckType()
    },
    components: {tablePage}
  }
</script>
<style scoped>

</style>
